
<template>
  <div class="swiper" :style="{'width':'100%'}">
    <div :style="{'margin-bottom':'20px'}">{{title}}</div>
    <span v-if="list.columns.length==0" :style="{'color': textcolor[8],'font-size':'12px'}">暂无数据</span>
    <div class="swipercontent" v-else>
      <div class="guide topguide" :style="{'border-color':textcolor[10]}">
        <div
          v-for="(item,index) in list.columns"
          :key="item"
          :style="{'flex':countlength[index],'border-color':textcolor[10]}"
        >{{item}}</div>
      </div>
      <div
        :style="{height:height*lineNum + 'px','border-color':textcolor[10]}"
        class="rollScreen_container"
        id="rollScreen_container"
      >
        <ul
          class="rollScreen_list"
          :style="{transform:transform,'border-color':textcolor[10]}"
          :class="{rollScreen_list_unanim:num===0}"
        >
          <li
            class="rollScreen_once guide"
            v-for="(item,index) in list.rows"
            :key="index"
            :style="{height:height+'px','border-color':textcolor[10]}"
            @click="showdetailmodal(item)"
          >
            <div
              v-for="(val,key,mindex) in item"
              :key="mindex"
              :style="{'flex':countlength[mindex],'border-color':textcolor[10]}"
            >{{val}}</div>
          </li>
          <li
            class="rollScreen_once guide"
            v-for="(item,index) in list.rows"
            :key="index+list.rows.length"
            :style="{height:height+'px','border-color':textcolor[10]}"
            @click="showdetailmodal(item)"
          >
            <div
              v-for="(val,key,mindex) in item"
              :key="mindex"
              :style="{'flex':countlength[mindex],'border-color':textcolor[10]}"
            >{{val}}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
 
<script>
import { mBack, getToken, back } from "../../../assets/js/common.js";
import { fetch, post } from "../../../config/request.js";
export default {
  props: {
    height: {
      default: 20,
      type: Number
    },
    lineNum: {
      default: 3,
      type: Number
    },
    chartData: {},
    colors: {},
    title: "",
    timer: "",
    searchid: "",
    chartid: "",
    drill: "",
    ifmove: {
      default: true
    }
  },
  data: function() {
    return {
      num: 0,
      list: {},
      textcolor: this.colors,
      intervaltime: this.timer,
      countlength: [],
      centerDialogVisible: false,
      modaldata: []
    };
  },
  mounted() {},
  destroyed() {},
  watch: {
    // swiperheight(oldvalue, newvalue) {
    //   console.log(newvalue/this.height/2);
    // }
    chartData(newvalue) {
      this.list = newvalue;
    }
  },
  computed: {
    transform: function() {
      return "translateY(-" + this.num * this.height + "px)";
    }
  },
  created: function() {
    this.list = this.chartData;
    this.list.columns.map((item, index) => {
      this.countlength.push(item.length);
    });
    var length = this.list.rows.length;
    let _this = this;
    if (this.ifmove) {
      setInterval(function() {
        if (_this.num !== length) {
          _this.num++;
        } else {
          _this.num = 0;
        }
      }, 4000);
    }
  },
  methods: {
    showdetailmodal(data) {
      if (this.chartData.drill) {
        this.$emit(
          "setdrill",
          data[this.list.columns[0]],
          this.drill,
          this.chartData.drill
        );
      } else {
        this.$emit("showdetailmodal", data, this.title);
      }
    }
  }
};
</script>
 
<style lang="scss">
.swiper {
  .swipercontent {
    border-bottom: 0;
    font-size: 12px;
  }
}
.rollScreen_container {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
  border-bottom: 1px solid #ccc;
}
.guide {
  width: 100%;
  display: flex;
  justify-content: space-around;
  border-top: 0.5px solid rgb(82, 82, 82);
  border-left: 0.5px solid rgb(82, 82, 82);
  border-right: 0;
  div {
    text-align: center;
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap; /*规定段落中的文本不进行换行 */
    overflow: hidden;
    border-right: 0.5px solid rgb(82, 82, 82);
    flex: 1;
  }
}
.topguide {
  font-size: 13px;
  font-weight: bold !important;
  border-bottom: 0;
}
.rollScreen_list {
  transition: 1s linear;
  width: 100%;
}
.rollScreen_list_unanim {
  transition: none;
}
</style>
